<template>
  <div class="table-component">
    <el-row>
      <el-col :span="8">
        <el-row class="content">
          <div class="label">联系人：</div>
          <div class="title">{{ orderDetails.contacts }}</div>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row class="content">
          <div class="label">联系方式：</div>
          <div class="title">{{ orderDetails.phone }}</div>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row class="content">
          <div class="label">详细地址：</div>
          <div class="title">{{ orderDetails.address }}</div>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row class="content">
          <div class="label">抬头名称：</div>
          <div class="title">{{ orderDetails.drawn }}</div>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row class="content">
          <div class="label">税号识别号：</div>
          <div class="title">{{ orderDetails.taxId }}</div>
        </el-row>
      </el-col>
      <el-col :span="8">
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="less" scoped>
.table-component {
  .content {
    margin-bottom: 20px;
  }
  .label {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
  .title {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}
</style>
